<template>
  <Modal id="keyword-modal"
         v-model="visible"
         width="800px"
         footer-hide>
    <div class="wrap">
      <div class="searchbox">
        <Input class="search-input"
               search
               enter-button
               placeholder="搜索"
               @on-click="search" />
      </div>
      <div class="chat-wrap">
        <ul class="chat-content">
          <li v-for="item in 16">
            <div class="avatar">
              <img src="../../../assets/img/avatar.png">
            </div>
            <div class="desc">
              <div class="info">
                <span>张三</span>
                <span>16:14</span>
              </div>
              <div class="content">
                内容内容内容内容内容内容内容内容内容内容内容内容内容
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </Modal>
</template>
<script>

export default {
  data () {
    return {
      visible: false,
      content: ''
    }
  },
  methods: {
    init (id) {
      this.visible = true
      this.$nextTick(() => {
        // this.$refs.editor.setHtml('' + id)
      })
    },
    handleChange (html, text) {

    },
    search () {

    }
  },
  components: {

  }
}
</script>
<style lang="scss">
#keyword-modal {
  .ivu-modal-mask {
    z-index: 10000000000 !important;
  }
  .ivu-modal-wrap {
    z-index: 10000000000 !important;
  }
  .wrap {
    margin-top: 40px;
    padding: 0 20px;
    .searchbox {
      margin-bottom: 20px;
    }
    .chat-wrap {
      width: 100%;
      max-height: 350px;
      overflow: auto;
      .chat-content {
        width: 100%;
        & > li {
          display: flex;
          width: 100%;
          padding: 10px 5px;
          border-bottom: 1px solid #dcdee2;
          & > .avatar {
            flex: 0 0 60px;
            position: relative;
            width: 40px;
            height: 0;
            padding-top: 40px;
            & > img {
              position: absolute;
              left: 0;
              top: 0;
              width: 40px;
              height: 40px;
            }
          }
          & > .desc {
            width: 100%;
            & > .info {
              overflow: hidden;
              color: gray;
              font-size: 14px;
              & > span {
                &:last-of-type {
                  float: right;
                }
              }
            }
            & > .content {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>
